<!DOCTYPE html>
<html>
<head>
<title>Billiard Ball Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="350" style="border:1px solid #d3d3d3;"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Parameters
const R = 75;        // Radius of the ball in pixels
const cx = 300;      // Center x of the ball
const cy = 180;      // Center y of the ball

// 1. Draw the horizontal surface (table)
const groundY = cy + R;
ctx.beginPath();
ctx.moveTo(30, groundY);
ctx.lineTo(420, groundY);
ctx.stroke();

// 2. Draw the ball
ctx.beginPath();
ctx.arc(cx, cy, R, 0, 2 * Math.PI);
ctx.stroke();

// 3. Draw the radius R
const angleR = -Math.PI / 5; // -36 degrees, looks close to the original
const endRx = cx + R * Math.cos(angleR);
const endRy = cy + R * Math.sin(angleR);
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(endRx, endRy);
ctx.stroke();

// Label R
ctx.font = '20px Times New Roman';
// Place the label near the midpoint of the radius line
ctx.fillText('R', cx + R * 0.5 * Math.cos(angleR) + 10, cy + R * 0.5 * Math.sin(angleR));

// 4. Draw the cue stick
// The original diagram shows the cue hitting above the center. h > R.
// We can set the height of the cue's centerline visually.
const cueCenterY = cy - R * 0.3; // Hit 30% of the radius above the center
const cueThickness = 14;
const cueTipX = cx - R; // Simple and visually effective
const cueStartX = 50;

// Cue upper and lower lines
ctx.beginPath();
ctx.moveTo(cueStartX, cueCenterY - cueThickness / 2);
ctx.lineTo(cueTipX, cueCenterY - cueThickness / 2);
ctx.moveTo(cueStartX, cueCenterY + cueThickness / 2);
ctx.lineTo(cueTipX, cueCenterY + cueThickness / 2);
ctx.stroke();

// Cue tip (rounded)
ctx.beginPath();
ctx.arc(cueTipX, cueCenterY, cueThickness / 2, -Math.PI / 2, Math.PI / 2);
ctx.stroke();

// Cue centerline (dashed)
ctx.beginPath();
ctx.setLineDash([5, 4]);
ctx.moveTo(cueStartX, cueCenterY);
ctx.lineTo(cueTipX, cueCenterY);
ctx.stroke();
ctx.setLineDash([]); // Reset to solid lines

// 5. Draw the height h indicator
const h_indicator_x = 150;
const h_pixels = groundY - cueCenterY;
// Vertical line
ctx.beginPath();
ctx.moveTo(h_indicator_x, cueCenterY);
ctx.lineTo(h_indicator_x, groundY);
ctx.stroke();

// T-bars for h
const t_bar_size = 12;
ctx.beginPath();
ctx.moveTo(h_indicator_x - t_bar_size / 2, cueCenterY);
ctx.lineTo(h_indicator_x + t_bar_size / 2, cueCenterY);
ctx.moveTo(h_indicator_x - t_bar_size / 2, groundY);
ctx.lineTo(h_indicator_x + t_bar_size / 2, groundY);
ctx.stroke();

// Label h
ctx.font = 'italic 20px Times New Roman';
ctx.fillText('h', h_indicator_x - 15, cueCenterY + h_pixels / 2);

// 6. Draw the figure caption
ctx.font = '18px Times New Roman';
ctx.fillText('Fig. 1.171.', 225, groundY + 40);

</script>

</body>
</html>